{% extends "base.html" %}
{% block content %}
    <style>
        p {
            font-size: 14px;
            line-height: 25px;
            letter-spacing: 3px;
        }
    </style>
    <div class="row page" id="plugins" style="display:block;">
        <div class="col-md-12">
            <div class="row">
                <div class="col-md-12">
                    <h4>Plugins?</h4>
                    <p>
                        jsTree将一些功能移出核心，因此您只能在需要时使用它。 要启用插件，请使用<code>plugins</code> <a href="/api/">配置</a>选项，并将该插件的名称添加到数组中。
                    </p>
                    <p>例如，可以通过以下方式启用所有插件:(<strong>仅启用所需的插件</strong>)</p>
                    <pre><code>"plugins" : [
	"checkbox",
	"contextmenu",
	"dnd",
	"massload",
	"search",
	"sort",
	"state",
	"types",
	"unique",
	"wholerow",
	"changed",
	"conditionalselect"
]</code></pre>
                    <p>通过下面的内容，您可以快速概览每一个插件的使用。</p>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Changed plugin</h3>
            <div class="row" style="margin-top:3em;">
                <div class="col-md-4">
                    <p>此插件可为 选中变化 添加额外信息。 一旦在<code>plugins</code> 配置选项中添加了<code>changed</code>
                        项，每个<code>changed.jstree</code>事件数据将包含一个名为changed的新属性，该属性将提供自上次
                        <code>changed.jstree</code>事件以来 已选中（selected ） 和 取消选中（deselected ） 的节点（nodes）的信息。</p>
                </div>
                <div class="col-md-8">
<pre><code>$(function () {
  $("#plugins")
    .on("changed.jstree", function (e, data) {
      console.log(data.changed.selected); // newly selected
      console.log(data.changed.deselected); // newly deselected
    })
    .jstree({
      "plugins" : [ "changed" ]
    });
});</code></pre>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Checkbox plugin</h3>
            <div class="row" style="margin-top:3em;">
                <div class="col-md-4">
                    <p>此插件在每个节点前面呈现复选框图标，使得多选择更加容易。
                        它还支持三态行为（未选中，部分选中，全选中），这意味着如果一个节点的一些子节点被选中，它将被渲染为未确定的状态，并且该状态将向上级传播。 您还可以使用级联配置选项微调级联选项。
                    <p>请记住，当级联选择复选框时，她同事也会检查已禁用的节点。</p>

                    <p>系统会自动计算未确定状态，但如果您正在使用AJAX并按需加载并且希望将节点呈现为未定义的传递“未确定”：在其状态中为true。</p>
                    <p><em>Undetermined state is automatically calculated, but if you are using AJAX and loading on
                        demand and want to render a node as underemined pass <code>"undetermined" : true</code> in its
                        state.</em></p>
                    <p>你可以从接口文档找到 <a href="/api/">复选框的所有配置项</a>。</p>
                </div>
                <div class="col-md-4">
<pre><code>$(function () {
  $("#plugins1").jstree({
    "checkbox" : {
      "keep_selected_style" : false
    },
    "plugins" : [ "checkbox" ]
  });
});</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="plugins1" class="demo plugin-demo">
                        <ul>
                            <li data-jstree='{"opened":true}'>Root node
                                <ul>
                                    <li>Child node 1</li>
                                    <li>Child node 2</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <script>
                        $(function () {
                            $("#plugins1").jstree({
                                "checkbox": {
                                    "keep_selected_style": false
                                },
                                "plugins": ["checkbox"]
                            });
                        });
                    </script>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Conditionalselect plugin</h3>
            <div class="row" style="margin-top:3em;">
                <div class="col-md-4">
                    <p>此插件会覆盖activate_node函数（当用户尝试选择节点时调用的函数），并通过使用回调来阻止函数调用。</p>
                </div>
                <div class="col-md-4">
<pre><code>$(function () {
  $("#plugins10").jstree({
    "conditionalselect" : function (node, event) {
      return false;
    },
    "plugins" : [ "conditionalselect" ]
  });
});</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="plugins10" class="demo plugin-demo">
                        <ul>
                            <li data-jstree='{"opened":true}'>Root node
                                <ul>
                                    <li>Child node 1</li>
                                    <li>Child node 2</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <script>
                        $(function () {
                            $("#plugins10").jstree({
                                "conditionalselect": function (node, event) {
                                    return false;
                                },
                                "plugins": ["conditionalselect"]
                            });
                        });
                    </script>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Contextmenu plugin</h3>
            <div class="row">
                <div class="col-md-4">
                    <p>添加此插件使得右键单击节点，显示一个可配置操作列表的菜单。</p>
                    <p>您可以在API中找到所有contextmenu插件配置选项。</p>
                </div>
                <div class="col-md-4">
<pre><code>$(function () {
  $("#plugins2").jstree({
     "core" : {
       // so that create works
       "check_callback" : true
     },
    "plugins" : [ "contextmenu" ]
  });
});</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="plugins2" class="demo plugin-demo">
                        <ul>
                            <li data-jstree='{"opened":true}'>Root node
                                <ul>
                                    <li>Context click me</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <script>
                        $(function () {
                            $("#plugins2")
                                .jstree({
                                    "core": {
                                        'force_text': true,
                                        "check_callback": true
                                    },
                                    "plugins": ["contextmenu"]
                                });
                        });
                    </script>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Drag &amp; drop plugin</h3>
            <div class="row">
                <div class="col-md-4">
                    <p>添加该插件，可以拖放树节点实现重新排列树节点的功能。</p>
                    <p>您可以在API中找到所有dnd插件配置选项。</p>
                </div>
                <div class="col-md-4">
<pre><code>$(function () {
  $("#plugins3").jstree({
    "core" : {
      "check_callback" : true
    },
    "plugins" : [ "dnd" ]
  });
});</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="plugins3" class="demo plugin-demo">
                        <ul>
                            <li data-jstree='{"opened":true}'>Root node
                                <ul>
                                    <li>Child node 1</li>
                                    <li>Child node 2</li>
                                </ul>
                            </li>
                            <li>Root node 2</li>
                        </ul>
                    </div>
                    <script>
                        $(function () {
                            $("#plugins3").jstree({
                                "core": {
                                    "check_callback": true
                                },
                                "plugins": ["dnd"]
                            });
                        });
                    </script>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Massload plugin</h3>
            <div class="row">
                <div class="col-md-4">
                    <p>此插件使得在单次请求加载节点成为可能（与懒加载一起使用）。</p>
                    <p>您可以在API中找到所有massload插件配置选项。</p>
                </div>
                <div class="col-md-8">
<pre><code>$(function () {
  $("#plugins10").jstree({
    "core" : {
      "data" : { .. AJAX config .. }
    },
    "massload" : {
      "url" : "/some/path",
      "data" : function (nodes) {
        return { "ids" : nodes.join(",") };
      }
    }
    "plugins" : [ "massload", "state" ]
  });
});</code></pre>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Search plugin</h3>
            <div class="row">
                <div class="col-md-4">
                    <p>此插件使得树具有了搜索的功能,甚至仅显示匹配的节点。</p>

                    <p>您可以在API中找到所有搜索插件配置选项。</p>
                </div>
                <div class="col-md-4">
<pre><code>$(function () {
  $("#plugins4").jstree({
    "plugins" : [ "search" ]
  });
  var to = false;
  $('#plugins4_q').keyup(function () {
    if(to) { clearTimeout(to); }
    to = setTimeout(function () {
      var v = $('#plugins4_q').val();
      $('#plugins4').jstree(true).search(v);
    }, 250);
  });
});</code></pre>
                </div>
                <div class="col-md-4">
                    <input type="text" id="plugins4_q" value="" class="input"
                           style="margin:0em auto 1em auto; display:block; padding:4px; border-radius:4px; border:1px solid silver;"/>
                    <div id="plugins4" class="demo plugin-demo">
                        <ul>
                            <li data-jstree='{"opened":true}'>Root node
                                <ul>
                                    <li>Child node 1</li>
                                    <li>Child node 2</li>
                                </ul>
                            </li>
                            <li>Root node 2</li>
                        </ul>
                    </div>
                    <script>
                        $(function () {
                            $("#plugins4").jstree({
                                "plugins": ["search"]
                            });
                            var to = false;
                            $('#plugins4_q').keyup(function () {
                                if (to) {
                                    clearTimeout(to);
                                }
                                to = setTimeout(function () {
                                    var v = $('#plugins4_q').val();
                                    $('#plugins4').jstree(true).search(v);
                                }, 250);
                            });
                        });
                    </script>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Sort plugin</h3>
            <div class="row">
                <div class="col-md-4">
                    <p>此插件根据 <strong>比较配置选项设置的方法</strong> 自动排列所有兄弟节点，默认按照字母顺序排序。</p>
                </div>
                <div class="col-md-4">
<pre><code>$(function () {
  $("#plugins5").jstree({
    "plugins" : [ "sort" ]
  });
});</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="plugins5" class="demo plugin-demo">
                        <ul>
                            <li data-jstree='{"opened":true}'>Root node
                                <ul>
                                    <li>2</li>
                                    <li>1</li>
                                    <li>3</li>
                                    <li>0</li>
                                </ul>
                            </li>
                            <li>Root node 2</li>
                        </ul>
                    </div>
                    <script>
                        $(function () {
                            $("#plugins5").jstree({
                                "plugins": ["sort"]
                            });
                        });
                    </script>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;State plugin</h3>
            <div class="row">
                <div class="col-md-4">
                    <p>此插件将所有打开和选定的节点保存在用户的浏览器中，因此当返回到同一个树时，将恢复先前的状态。</p>

                    <p>您可以在API中找到所有状态插件配置选项。 进行选择并刷新此页面以查看更改是否仍然存在。</p>
                </div>
                <div class="col-md-4">
<pre><code>$(function () {
  $("#plugins6").jstree({
    "state" : { "key" : "demo2" },
    "plugins" : [ "state" ]
  });
});</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="plugins6" class="demo plugin-demo">
                        <ul>
                            <li data-jstree='{"opened":true}'>Root node
                                <ul>
                                    <li>A</li>
                                    <li>few</li>
                                    <li>more</li>
                                    <li>nodes</li>
                                </ul>
                            </li>
                            <li>Root node 2</li>
                        </ul>
                    </div>
                    <script>
                        $(function () {
                            $("#plugins6").jstree({
                                "state": {"key": "demo2"},
                                "plugins": ["state"]
                            });
                        });
                    </script>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Types plugin</h3>
            <div class="row">
                <div class="col-md-4">
                    <p>此插件可以为节点组添加预定义类型，这意味着可以轻松控制每个组的嵌套规则和图标。</p>

                    <p>要设置节点的类型，可以使用<code>set_type</code>或为节点的数据提供<code>type</code>属性。</p>

                    <p>您可以在API中找到所有类型的插件配置选项和方法。</p>
                </div>
                <div class="col-md-4">
<pre><code>$(function () {
  $("#plugins7").jstree({
    "types" : {
      "default" : {
        "icon" : "glyphicon glyphicon-flash"
      },
      "demo" : {
        "icon" : "glyphicon glyphicon-ok"
      }
    },
    "plugins" : [ "types" ]
  });
});</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="plugins7" class="demo plugin-demo">
                        <ul>
                            <li data-jstree='{"opened":true, "type":"demo"}'>Root node
                                <ul>
                                    <li>Node</li>
                                </ul>
                            </li>
                            <li>Root node 2</li>
                        </ul>
                    </div>
                    <script>
                        $(function () {
                            $("#plugins7").jstree({
                                "types": {
                                    "default": {
                                        "icon": "glyphicon glyphicon-flash"
                                    },
                                    "demo": {
                                        "icon": "glyphicon glyphicon-ok"
                                    }
                                },
                                "plugins": ["types"]
                            });
                        });
                    </script>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Unique plugin</h3>
            <div class="row">
                <div class="col-md-4">
                    <p>阻止具有相同名称的节点共存为兄弟节点。 此插件没有选项，它只是阻止重命名、或者将具有相同名称的节点，节点移动到同一个父节点。</p>
                </div>
                <div class="col-md-4">
<pre><code>$(function () {
  $("#plugins8").jstree({
    "core" : {
      "check_callback" : true
    },
    "plugins" : [ "unique", "dnd" ]
  });
});</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="plugins8" class="demo plugin-demo">
                        <ul>
                            <li data-jstree='{"opened":true}'>Root node
                                <ul>
                                    <li>Node</li>
                                </ul>
                            </li>
                            <li>Root node 2
                                <ul>
                                    <li>Node</li>
                                </ul>
                            </li>
                        </ul>
                    </div>
                    <script>
                        $(function () {
                            $("#plugins8").jstree({
                                "core": {
                                    "check_callback": true
                                },
                                "plugins": ["unique", "dnd"]
                            });
                        });
                    </script>
                </div>
            </div>

            <h3><i class="glyphicon glyphicon-leaf"></i>&nbsp;Wholerow plugin</h3>
            <div class="row">
                <div class="col-md-4">
                    <p>使每个选中的节点以块级别显示，使选择更容易。 但是在旧浏览器中，会导致比较大的树加载、显示速度变慢。</p>
                </div>
                <div class="col-md-4">
<pre><code>$(function () {
  $("#plugins9").jstree({
    "plugins" : [ "wholerow" ]
  });
});</code></pre>
                </div>
                <div class="col-md-4">
                    <div id="plugins9" class="demo plugin-demo">
                        <ul>
                            <li data-jstree='{"opened":true}'>Root node
                                <ul>
                                    <li data-jstree='{"selected":true}'>Node</li>
                                </ul>
                            </li>
                            <li>Root node 2</li>
                        </ul>
                    </div>
                    <script>
                        $(function () {
                            $("#plugins9").jstree({
                                "plugins": ["wholerow"]
                            });
                        });
                    </script>
                </div>
            </div>
        </div>
        <p style="text-align:center; margin-top:2em;"><a href="//old.jstree.com" target="_blank">click here for the old site (v.1)</a>
        </p>
    </div>
{% endblock %}
{% block js %}
    <script>
        $(document).ready(function () {
            $("#pluginss").addClass("active")
        });
    </script>
{% endblock %}
